<template>
  <div class="user-profile">
    <!-- 返回按钮 -->
    <el-button type="primary" @click="goBack" class="back-button">
      <el-icon><DArrowLeft /></el-icon>
      {{ $t("userdet.backButtonText") }}
    </el-button>

    <!-- 用户信息卡片 -->
    <el-card class="user-card" v-if="user" shadow="always">
      <div slot="header" class="card-header">
        <span>{{ $t("userdet.cardHeader") }}</span>
      </div>

      <div class="user-info">
        <!-- 用户信息行 -->
        <el-row class="info-row">
          <el-col :span="6" class="info-label">
            <el-icon :size="18"><User /></el-icon>
            <strong>{{ $t("userdet.usernameLabel") }}</strong>
          </el-col>
          <el-col :span="18">{{
            user.username || $t("userdet.noUsername")
          }}</el-col>
        </el-row>
        <el-row class="info-row">
          <el-col :span="6" class="info-label">
            <el-icon :size="18"><Phone /></el-icon>
            <strong>{{ $t("userdet.phoneLabel") }}</strong>
          </el-col>
          <el-col :span="18">{{ user.phone || $t("userdet.noPhone") }}</el-col>
        </el-row>
        <el-row class="info-row">
          <el-col :span="6" class="info-label">
            <el-icon :size="18"><Location /></el-icon>
            <strong>{{ $t("userdet.addressLabel") }}</strong>
          </el-col>
          <el-col :span="18">{{
            user.transactionLocation || $t("userdet.noAddress")
          }}</el-col>
        </el-row>
        <el-row class="info-row">
          <el-col :span="6" class="info-label">
            <el-icon :size="18"><Place /></el-icon>
            <strong>{{ $t("userdet.roleLabel") }}</strong>
          </el-col>
          <el-col :span="18">{{ user.role || $t("userdet.noRole") }}</el-col>
        </el-row>
      </div>
    </el-card>

    <!-- Loading Spinner -->
    <el-loading :loading="isLoading" :text="$t('userdet.loadingText')" />
  </div>
</template>

<script setup>
import { ref, onMounted } from "vue";
import { ElMessage, ElLoading } from "element-plus";
import request from "@/utils/request";
import router from "@/router/index.js";
import { DArrowLeft } from "@element-plus/icons-vue"; // 引入request.js工具类

// 假设之前从localStorage获取用户信息并解析的代码逻辑如下（如果已经在其他地方做了此操作，可直接使用获取到的用户ID）
const userInfo = JSON.parse(localStorage.getItem("xm-pro-user"));
const buyerid = userInfo.id;
console.log("用户ID为：", buyerid);
console.log("用户id类型为：", typeof buyerid);

// 定义响应式变量
const user = ref(null);
const isLoading = ref(false);

// 发送请求获取用户信息
const fetchUserData = (userId) => {
  isLoading.value = true;
  request
    .get(`/buyer/selectById/${buyerid}`)
    .then((response) => {
      // 假设返回数据在 response.data 中
      if (response.code === "200") {
        user.value = response.data;
      } else {
        ElMessage.error(t("userdet.fetchError"));
      }
    })
    .catch((error) => {
      console.error("请求出错：", error);
      ElMessage.error(t("userdet.requestError"));
    })
    .finally(() => {
      isLoading.value = false;
    });
};

// 返回上一页
const goBack = () => {
  router.go(-1);
};

// 页面加载时自动获取用户数据
onMounted(() => {
  fetchUserData();
});
</script>

<style scoped>
/* 页面背景渐变 */
.user-profile {
  padding: 30px;
  background: linear-gradient(135deg, #f0f4f8, #e0e7ff);
  min-height: 100vh;
}

/* 返回按钮 */
.back-button {
  margin-bottom: 30px;
  background-color: #409eff;
  color: white;
  padding: 10px;
  border-radius: 50px;
  font-weight: bold;
  font-size: 16px;
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
  transition: background-color 0.3s;
}

.back-button:hover {
  background-color: #66b1ff;
}

/* 用户卡片样式 */
.user-card {
  max-width: 800px;
  margin: 0 auto;
  background-color: #ffffff;
  border-radius: 16px;
  box-shadow: 0 10px 20px rgba(0, 0, 0, 0.1);
  padding: 30px;
  transition: box-shadow 0.3s ease;
}

.user-card:hover {
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.2);
}

/* 卡片头部样式 */
.card-header {
  font-size: 25px;
  font-weight: bold;
  color: #333;
  margin-bottom: 20px;
}

/* 用户信息展示区 */
.user-info {
  font-size: 18px;
  color: #555;
}

/* 用户信息行的样式 */
.info-row {
  margin-bottom: 20px;
  display: flex;
  align-items: center;
  font-size: 16px;
  color: #333;
}

.info-row .info-label {
  display: flex;
  align-items: center;
}

.info-row strong {
  color: #409eff;
  font-weight: bold;
  margin-left: 10px;
}

.el-icon {
  /*color: #409EFF;*/
  margin-right: 8px;
}

/* 弹出加载中的样式 */
.el-loading-spinner {
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

/* 弹出消息框样式 */
.el-message {
  font-size: 16px;
  background-color: #f5f5f5;
  border-radius: 4px;
}
</style>
